<template>
  <div>
    <el-tabs type="border-card" v-model="activeTab">
      <el-tab-pane label="资源区" name="docs">
        <CommunityDocs :active="activeTab === 'docs'" />
      </el-tab-pane>
      <el-tab-pane label="讨论区" name="issues">
        <CommunityIssues :active="activeTab === 'issues'" />
      </el-tab-pane>
      <el-tab-pane label="搜索" name="search">
        <CommunitySearch />
      </el-tab-pane>
      <el-tab-pane v-if="allowSettings" label="邀请" name="invites">
        <CommunityInvites :active="activeTab === 'invites'" />
      </el-tab-pane>
      <el-tab-pane v-if="allowSettings" label="设置" name="settings">
        <CommunitySettings :active="activeTab === 'settings'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import CommunityDocs from './docs';
import CommunityIssues from './issues';
import CommunitySearch from './search';
import CommunityInvites from './invites';
import CommunitySettings from './settings';

export default {
  name: 'Section', // 社区主要内容展示区域
  components: {
    CommunityDocs,
    CommunityIssues,
    CommunitySearch,
    CommunityInvites,
    CommunitySettings,
  },
  data() {
    return {
      activeTab: 'docs',
    };
  },
  computed: {
    ...mapState(['currentUser', 'currentCommunity']),
    allowSettings() {
      const isOwner = this.currentUser.id === this.currentCommunity.owner.id;
      return isOwner || this.currentUser.admin;
    },
  },
};
</script>

<style></style>
